<template>
    <div class="category-list-coa">
        <h4>课程分类</h4>
        <ul v-if="categoriesList.length">
            <li v-for="category in categoriesList" :key="category.id">
                <div class="name" :class="{ 'active': categoryId == category.id }">
                    <template v-if="category.children">
                        <i class="iconfont icon-xiala1 xiala" @click="openOneChild(category)" v-if="category.isOpen"></i>
                        <i class="iconfont icon-xiala xiala" @click="openOneChild(category)" v-else></i>
                    </template>

                    <span class="nametit" @click="choice(category)">{{ category.label }}</span>
                    <i class="iconfont icon-xiangyoujiantou" @click="choice(category)"></i>
                </div>
                <ul v-if="category.children" class="second-list" v-show="category.isOpen">
                    <li v-for="categorySec in category.children" :key="categorySec.id">
                        <div class="name" :class="{ 'active': categoryId == categorySec.id }">
                            <template v-if="categorySec.children">
                                <i class="iconfont icon-xiala1 xiala" @click="openOneChild(categorySec)"
                                    v-if="categorySec.isOpen"></i>
                                <i class="iconfont icon-xiala xiala" @click="openOneChild(categorySec)" v-else></i>
                            </template>
                            <span class="nametit" @click="choice(categorySec)">{{ categorySec.label }}</span>
                            <i class="iconfont icon-xiangyoujiantou more" @click="choice(categorySec)"></i>
                        </div>
                        <ul v-if="categorySec.children" class="third-list" v-show="categorySec.isOpen">
                            <li v-for="categoryThird in categorySec.children" :key="categoryThird.id">
                                <div class="name" :class="{ 'active': categoryId == categoryThird.id }"
                                    @click="choice(categoryThird)">
                                    <template v-if="categoryThird.children">
                                        <i class="iconfont icon-xiala1 xiala" @click="openOneChild(categoryThird)"
                                            v-if="categoryThird.isOpen"></i>
                                        <i class="iconfont icon-xiala xiala" @click="openOneChild(categoryThird)" v-else></i>
                                    </template>
                                    <span class="nametit">{{ categoryThird.label }}</span>
                                    <i class="iconfont icon-xiangyoujiantou more"></i>
                                </div>
                                <ul v-if="categoryThird.children" class="four-list"  v-show="categoryThird.isOpen">
                                    <li v-for="categoryFour in categoryThird.children" :key="categoryFour.id">
                                        <div class="name" :class="{ 'active': categoryId == categoryFour.id }"
                                            @click="choice(categoryFour)">
                                            <span class="nametit">{{ categoryFour.label }}</span>
                                            <i class="iconfont icon-xiangyoujiantou more"></i>
                                        </div>
              
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
  
<script>

export default {
    name: 'Category',
    props: {
        categories: Array,
    },
    data() {
        return {
            categoryId: '',

            categoriesList: []
        }
    },
    mounted() {
        // console.log(this.categories)
        let arr = this.categories
        this.categoriesList = arr.map(item => {
            item.isOpen = true;
            if (item.children && item.children.length) {
                item.children.map(item2 => {
                    item2.isOpen = true;
                    if (item2.children && item2.children.length) {
                        item2.children.map(item3 => {
                            item3.isOpen = true;
                            if (item3.children && item3.children.length) {
                                item3.children.map(item4 => {
                                    item4.isOpen = true;

                                })
                            }
                        })
                    }
                })
            }
            return item
        })

        // console.log(this.categoriesList)
    },
    methods: {

        choice(item) {
            this.categoryId = item.id
            this.$emit('choiceCategory', item)
        },
        // 分类展开收起
        openOneChild(item) {
            item.isOpen = !item.isOpen
            this.$forceUpdate();//在这里，强制刷新
        },

    }
};
</script>

<style lang="less" scoped>
.category-list-coa {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;

    h4 {
        text-align: center;
    }

    .name {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        padding-left: 8px;
        padding-right: 10px;
        box-sizing: border-box;

        &.active {
            background: #ecf2ff;

            span {
                color: #5881db;
            }
        }

        span {
            font-size: 14px;
            color: #333;
        }

        span.nametit {
            font-size: 14px;
            color: #333;
            flex: 1;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .xiala {
            font-size: 12px;
            color: #666;
            margin-right: 4px;
            flex-shrink: 0;
        }

        .more {
            font-size: 12px;
            flex-shrink: 0;

        }
    }
}

ul.second-list {
    padding-left: 20px;
    box-sizing: border-box;
}

ul.third-list {
    padding-left: 20px;
    box-sizing: border-box;
}

ul.four-list {
    padding-left: 20px;
    box-sizing: border-box;
}
</style>